<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				width: 800px;
				height: 300px;
			}
			.con{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -400px;
				margin-top: -150px;
			}
			.photo{
				width: 300px;
				height: 300px;
				background-image: url(js/img/images/tu.jpg);
				background-size: contain;
				background-position: center center;
				border-radius: 50%;
			}
			td{
				text-align: center;
				color: red;
			}
			td:hover{
				background-color: aqua;
				border-radius: 70%;
			}
		</style>
		<script type="text/javascript">
			function funClick(){
				location.href = "https://image.baidu.com/search/index?tn=baiduimage&word="+event.target.innerHTML;
			}
			let index=1;
			let t1;
			let obj;
			function funOver(){
				clearInterval(t1);
				obj=event.target;
				let url=`js/img/images/${obj.innerHTML}/${index}.jpg`;
				document.querySelector(".photo").setAttribute("style",`background-image:url(${url});`);
			}
			function funOut(){
				t1=setInterval(display,1000);
			}
			function display(){
				index ++;
				if(index>7){
					index=1;
				}
				let url=`js/img/images/${obj.innerHTML}/${index}.jpg`;
				document.querySelector(".photo").setAttribute("style",`background-image:url(${url});`);
			}
			let curOp=1;
			let change=-0.1;
			function changeOpacity(){
				if(curOp>1){
					curOp=curOp-0.1;
				}else if(curOp<0.1){
					change=0.1;
				}
				curOp=curOp+change;
				document.querySelector(".photo").setAttribute("style",`opacity:${curOp};`);
			}
			
		</script>
	</head>
	<body onload="changeOpacity()">
		<div class="con">
			<table>
				<tr>
					<td rowspan="5">
						<div class="photo"></div>
					</td>
					
					<td colspan="2">
						<input type="text" id="key" />
						<button id="search">搜索</button>
					</td>
				</tr>
				<tr>
					<td class="note">中国国宝</td>
					<td class="note">兵马俑</td>
				</tr>   
				<tr>    
					<td class="note">川菜</td>
					<td class="note">粤菜</td>
				</tr>   
				<tr>    
					<td class="note">新疆风情</td>
					<td class="note">客家土楼</td>
				</tr>   
				<tr>    
					<td class="note">民族乐器</td>
					<td class="note">青铜重器</td>
				</tr>         
			</table>
		</div>
		<script type="text/javascript">
			let notes=document.querySelectorAll(".note");
			for (let i = 0; i < notes.length; i++) {
				notes[i].addEventListener("click",funClick);
				notes[i].addEventListener("mouseover",funOver);
				notes[i].addEventListener("mouseout",funOut);
				
			}
			document.getElementById("search").onclick = function(){
				let key =document.getElementById("key").value;
				if(key!=""){
				location.href="https://image.baidu.com/search/index?tn=baiduimage&word=" + key;
			}
			setInterval(changeOpacity,200);
			}
		</script>
	</body>
</html>
